<template>
<!-- 商品分类导航 -->
    <div class="type-nav">
            <div class="container">
                <h2 class="all">全部商品分类</h2>
                <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
                </nav>
                <div class="sort">
                    <div class="all-sort-list2">
                        <!-- 把剩余item删了取真实数据然后遍历一组就够了-->
                        <div
                         class="item"
                          v-for="(category,index) in categoryList"
                          :key="category.categoryId"
                          :class="currentIndex===index?'active':''"
                          @mouseenter="mouseenter(index)"
                            @mouseleave="currentIndex = -1"
                           @click='toSearch'
                         > 
                         <!-- index为下标
                                 active为下面css样式的名字 -->
                            <h3>
                                <a
                                  :data-category1Id='category.categoryId'
                                  :data-categoryName='category.categoryName'
                                >{{ category.categoryName }} 
                                </a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore"
                                     v-for="child in category.categoryChild"
                                     :key='child.categoryId'
                                    >
                                    <!-- child的下面的值以此累加 -->
                                        <dt>
                                            <a 
                                            :data-category2Id='child.categoryId'
                                            :data-categoryName='child.categoryName'
                                            
                                            >{{child.categoryName}}</a>
                                        </dt>
                                        <dd>
                                            <em 
                                            v-for="item in child.categoryChild"
                                            :key="item.categoryId"
                                            >
                                                <a 
                                                  :data-category3Id='item.categoryId'
                                                 :data-categoryName='item.categoryName'
                                                >{{ item.categoryName }}</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</template>

<script>
// import _ from "lodash";
import { mapActions, mapState } from "vuex";
export default {
  name:'NavType',
  data(){
    return {
        currentIndex:-1,
    }
  },
  mounted() {
    //初始化的时候,直接让vuex去请求categoryList数据
    this.getCategoryList();
    
    /* 
      必须只能调用一次_.throttle方法,
      得到一个真正的事件函数,所有的列表全部用的都是这个函数
      _.throttle方法返回的函数可以接受参数,并传递给核心函数mouseenter
    */
//    this.throttleEnter=_.throttle(this.mouseenter,30,{
//     trailing:false,
//     leading:true,
//    })
  },
  methods: {
    //获取异步的原生
      // ...mapActions处理异步的
    ...mapActions("home", ["getCategoryList"]),
    //三级列表鼠标移入事件
    mouseenter(index){
        this.currentIndex=index;
        console.log(index,'index');
    },
    // 三级列表每个元素的编程式路由导航
    //把路由里的信息比如id 发送给search路由  然后跟据get请求 返回的根据id数据渲染
    //根据enevnt事件对象 
    toSearch(e){
        if(e.target.nodeName==='A'){
            console.log(e);
            const query = {};
               // console.log(e.target.dataset);
               const {category1id,category2id,category3id,categoryname}=
               e.target.dataset;
                query.categoryName = categoryname;
               if(category1id){
                query.category1id=category1id;
               }else if (category2id){
                query.category2id=category2id;
               }else if(category3id){
                query.category3id=category3id
               }
               console.log(query);
               this.$router.push({
                path:'/search',
                query:query
               })
        }
    }
  },
  computed: {
    ...mapState("home", ["categoryList"]),
  },

}
// ...mapState 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，
// 我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
//拿取vuex监听状态的改变
</script>

<style lang='less' scoped>
 .type-nav {
        border-bottom: 2px solid #e1251b;

        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            position: relative;

            .all {
                width: 210px;
                height: 45px;
                background-color: #e1251b;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            .nav {
                a {
                    height: 45px;
                    margin: 0 22px;
                    line-height: 45px;
                    font-size: 16px;
                    color: #333;
                }
            }

            .sort {
                position: absolute;
                left: 0;
                top: 45px;
                width: 210px;
                height: 461px;
                position: absolute;
                background: #fafafa;
                z-index: 999;

                .all-sort-list2 {
                    .item {
                        h3 {
                            line-height: 30px;
                            font-size: 14px;
                            font-weight: 400;
                            overflow: hidden;
                            padding: 0 20px;
                            margin: 0;

                            a {
                                color: #333;
                            }
                        }

                        .item-list {
                            display: none;
                            position: absolute;
                            width: 734px;
                            min-height: 460px;
                            background: #f7f7f7;
                            left: 210px;
                            border: 1px solid #ddd;
                            top: 0;
                            z-index: 9999 !important;

                            .subitem {
                                float: left;
                                width: 650px;
                                padding: 0 4px 0 8px;

                                dl {
                                    border-top: 1px solid #eee;
                                    padding: 6px 0;
                                    overflow: hidden;
                                    zoom: 1;

                                    &.fore {
                                        border-top: 0;
                                    }

                                    dt {
                                        float: left;
                                        width: 54px;
                                        line-height: 22px;
                                        text-align: right;
                                        padding: 3px 6px 0 0;
                                        font-weight: 700;
                                    }

                                    dd {
                                        float: left;
                                        width: 415px;
                                        padding: 3px 0 0;
                                        overflow: hidden;

                                        em {
                                            float: left;
                                            height: 14px;
                                            line-height: 14px;
                                            padding: 0 8px;
                                            margin-top: 5px;
                                            border-left: 1px solid #ccc;
                                        }
                                    }
                                }
                            }
                        }

                        &.active {
                            background: paleturquoise;
                            .item-list {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
</style>